<template>
	<view class='shop-list'>
		<view class='shop-title f-color'>
			<view class='shop-item' v-for="(item,index) in shopList.data" :key='index' @tap='changTab(index)'>
				<view :class=" shopList.currentIndex==index?'f-active-color':'' ">{{item.name}}</view>
				<view class='shop-icon'>
					<view class='iconfont icon-shangjiantou up' :class='item.status ===1 ? "f-active-color":"" '></view>
					<view class='iconfont icon-xiajiantou down' :class=' item.status ===2 ? "f-active-color":"" '>
					</view>
				</view>
			</view>
		</view>
		<Lines />
		<CommodityList :dataList='dataList'></CommodityList>

	</view>
</template>

<script setup>
	import $http from '@/common/api/request.js'
	import Lines from '@/components/common/Line.vue'
	import CommodityList from './CommodityList.vue'
	import {
		reactive,
		ref,
		defineProps,
		onMounted,
		computed
	} from 'vue'
	onMounted(() => {
		getData()
	})
	const shopList = reactive({
		currentIndex: 0,
		data: [{
				name: "价格",
				status: 1,
				key: "pprice",
			},
			{
				name: "折扣",
				status: 0,
				key: "discount"
			},
			{
				name: "品牌",
				status: 0,
				key: "pingpai"
			}
		]
	})
	const a= ref('asc');
	const orderBy = computed(() => {
		// console.log(111);
		//拿到当前对象
		let obj = shopList.data[shopList.currentIndex];
		let val = obj.status === "1" ? "asc" : "desc";
		return {
			[obj.key]: val
		}
	})
	const porps = defineProps({
		keyword: {
			type: String
		}
	})
	const dataList = ref([])
	const changTab = (index) => {
		// console.log(orderBy.value);
		let b =a.value
		a.value='desc'
		getData()
		//索引值
		// let idx = shopList.currentIndex;
		// //具体哪一个对象
		// let item = shopList.data[idx];
		// if (idx == index) {
		// 	return item.status = item.status === 1 ? 2 : 1;
		// }
		// //新的值
		// let newItem = shopList.data[index];
		// item.status = 0;
		// shopList.currentIndex = index;
		// newItem.status = 1;
	
	}
	const getData = () => {
		$http.request({
			url: "/goods/search",
			data: {
				name: porps.keyword,
				discount:a.value
			}
		}).then((res) => {
			dataList.value = res
		}).catch(() => {
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			})
		})
	}
	
</script>

<style scoped>
	.shop-title {
		display: flex;
	}

	.shop-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}

	.shop-icon {
		margin-top: 5rpx;
		position: relative;
		margin-left: 10rpx;
	}

	.iconfont {
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}

	.up {
		top: -34rpx;
	}

	.down {
		top: -24rpx;
	}
</style>
